{extend name="layout"}
{block name="body"}
<section class="wld-content">
	{if $type eq 1}
    <div class="page_title">不限人数套餐</div>
	{else/}
	<div class="page_title">传统人数套餐</div>
	{/if}
	<div class="page_title_obj">
		<a class="go_back" href="{:url('index/index/index')}">返回到工作台</a>
		
	</div>
    <div class="con_box layui-form">
        <div class="package-con">
			<p class="package-con-title" style="">套餐类型 <a href="{:url('index/index/services')}">服务内容</a></p>
            <div class="package-box">
            	{foreach $list as $key=>$vo}
	                <div class="package-list">
						<div class="package-tc">{$vo.title|default=''}</div>
						<!-- <h2 class="package-name"></h2>
						<span class="line"></span> -->

						{if $vo.type eq 1}
						<div class="package-text text-top">服务点数：{$vo.point|default='0'}点</div>
						{else/}
						<div class="package-text text-top">服务人数：1~{$vo.people|default='0'} 人</div>
						<div class="package-text">服务时间：{$vo.service_time|default=''}</div>
						{/if}
						<div class="package-pic"><span>￥</span>{$vo.price|default='0.00'}</div>

						<div class="package-btn" data-id="{$vo.id|default=''}">立即购买</div>
	                </div>
                {/foreach}
				
			
            </div>


        </div>
      
      </div>
  
</section>
{/block}
{block name="script"}
<script>
    $(document).ready(function(){
		$(".package-btn").on("click",function(){
			// $.msg.alert("请联系客服：0311-85289358","购买服务","tips")
			var pid = $(this).attr("data-id")
			window.location.href="/index/index/renewal_details.html?id=" + pid
		})
		
	})
</script>
<style>
	.con_box{
		padding-bottom: 0;
	}
	.package-con{
		padding: 25px 25px 0;
	}
	.package-box{
		
		overflow: hidden;
	}


	.package-list{
		width: 202px;
		display: block;
		float: left;
		height: 319px;
		margin: 0 8px 37px;
		background: transparent;
		/*box-shadow: 0px 0px 30px 0px rgba(96, 203, 216, 0.15);*/
		border-radius: 10px;
		text-align: center;
		position: relative;
		background-image: url('__ROOT__/static/index/img/package-1.png');
		background-repeat: no-repeat;
		background-size: contain;
		background-position: bottom;
		cursor: pointer;
	}
	.package-tc{
		height: 65px;
		/*background: rgba(98, 201, 216, 0.1);*/
		font-weight: bold;
		color: #999999;
		line-height: 65px;

		border-top-left-radius: 10px;
		border-top-right-radius: 10px;
		
		font-size: 16px;
	
		
	}
	.package-name{
		line-height: 20px;
		height: 20px;
		font-size: 20px;
		color: #2C2C2C;
		margin-top: 36px;
	}
	.line{
		display: block;
		margin: 0 auto;
		width: 80px;
		margin-top: 21px;
		height: 1px;
		background: #D3D3D3;
	}
	.package-pic{
		margin-top: 24px;
		font-size: 32px;
		color: #62C9D8;
		font-weight: bold;
	}
	.package-pic span{
	
		font-size: 16px;
	
	}
	.package-text{
		font-size: 14px;
		font-weight: 600;
		color: #999999;
		margin-top: 20px;
		text-align: left;
		padding-left: 42px;
	}
	.package-text.text-top{
		margin-top: 26px;
	}
	.package-other{
		margin: 0 auto;
		margin-top: 20px;
		color: #9C9CAE;
		max-width: 80%;
	
		
	}
	.package-btn{
		width: 125px;
		height: 44px;
		margin: 0 auto;
		color: #62C9D8;
		border: 1px solid #62C9D8;
		line-height: 44px;
		font-size: 16px;
		border-radius: 10px;
		position: absolute;
		background: rgba(98, 201, 216, 0);
		top: 245px;
		left: 50%;
		transform: translateX(-50%);
	}

	.package-list:hover{
		transition: all 0.5s;
		background-image:  url('__ROOT__/static/index/img/package-3.png');
		box-shadow: 0px 0px 30px 0px rgba(98, 201, 216, 0.3);
	}
	.package-list:hover .package-tc{
		transition: all 0.25s;
		/*background: rgba(98, 201, 216, 1);*/
		color: #fff;
	}
	.package-list:hover .package-btn{
		transition: all 0.25s;
		background: rgba(98, 201, 216, 1);
		color: #fff;

	}
	.package-list:hover .package-text{

		transition: all 0.25s;
		color: #333333;

	}
	.serveList{
		padding: 0 25px;
	}
	.package-con-title{
		line-height: 35px;
		
		font-size: 16px;
		font-weight: 600;
		margin-bottom: 5px;
		padding-bottom: 15px;
		/* border-bottom:1px solid #e2e2e2 ; */
		position: relative;
		padding-left: 15px;
	}
	.package-con-title::after{
		content: "";
		display: block;
		width: 5px;
		height: 20px;
		position: absolute;
		top: 8px;
		left: 0;
		background-color: rgba(98, 201, 216, 1);
	}
	.package-con-title a{
		position: absolute;
		right: 22px;
		top: 3px;
		display: inline-block;
		line-height: 30px;
		background: #E7F7F9;
		border-radius: 5px;

		font-size: 14px;
		color: #61CAD7;
		padding-left: 15px;
		padding-right: 15px;
	}
	
	.con_table{
	
		padding-bottom:45px;
	}
	.wld-main section{
		padding-bottom: 50px;
	}
</style>
{/block}